<!--重污染天气预警响应 hePoWeatherWarningResponseRpt-->
<template>
    <Layout>
        <Form ref="queryForm" :model="dataToQuery" :label-width="120">
            <Row class="query-form"  >
                <Col span="8">
                    <FormItem label="企业名称：" prop="order">
                        <cascader-dom class="query-form-el" ref='queryOrgCascader' @setOrgInfo='setQueryCompanyId' :orgTree="true" :currentOrgId="dataToQuery.companyId" :setCurrentName="{label:dataToQuery.companyName,value:dataToQuery.companyId}"></cascader-dom>
                    </FormItem>
                </Col>
                <Col span="8">
                    <FormItem label='预警级别：' prop='warningLevel'>
                        <Select class='query-form-el' placeholder="请选择预警级别" type='text' v-model='dataToQuery.warningLevel' clearable>
                            <Option v-for="item in dictMap.wlMap" :value="item.codingCodeId" :key="item.codingCodeId">{{ item.codingName }}</Option>
                        </Select>
                    </FormItem>
                </Col>
                <Col span="8" v-if="!switchFlag">
                    <Button @click="switchQuery(true)" class="ivu-btn-switch" type="text">展开∨</Button>
                    <Button @click="rester" class="ivu-btn-reset">重置</Button>
                    <Button class="ivu-btn-query" icon="md-search" @click="query">查询</Button>
                </Col>
                <Col span="8" v-else>
                    <FormItem label='预警期间：' prop="warningPeriodArr">
                        <DatePicker  class="query-form-el" v-model="warningPeriodArr" format="yyyy-MM-dd" type="daterange" placement="bottom-end" placeholder="请选择预警时间段"
                                     @on-change="(date) => onSelectFieldQueryDateRange(date, 'warningPeriodArr')"></DatePicker>
                    </FormItem>
                </Col>
            </Row>
            <Row v-show="switchFlag" class="query-form" >
                <Col span="8">
                    <FormItem label='管控类型：' prop='controlTypeArr'>
                        <Select class='query-form-el' placeholder="请选择预警级别" multiple :max-tag-count="2" v-model='dataToQuery.controlTypeArr'
                               @on-change="(val)=>{if(val && val.length>0){dataToQuery.controlType=val.join('|')}else{dataToQuery.controlType=null};}" >
                            <Option v-for="item in dictMap.controlTypes" :value="item.codingCodeId" :key="item.codingCodeId">{{ item.codingName }}</Option>
                        </Select>
                    </FormItem>
                </Col>
                <Col span="8" offset="8">
                    <Button @click="switchQuery(false)" class="ivu-btn-switch" type="text">收起∧</Button>
                    <Button @click="rester" class="ivu-btn-reset">重置</Button>
                    <Button class="ivu-btn-query" icon="md-search" @click="query">查询</Button>
                </Col>
            </Row>
            <Row class="query-form">
                <Col span="24">
                    <Button size="large"  class="ivu-btn-add" icon="md-add"  @click="addInfo">新增</Button>
                    <Button type="primary" class="ivu-btn-add"   icon="md-cloud-download"  @click="exportFormSubmit">导出</Button>
                </Col>
            </Row>
        </Form>
        <Table ref='table' :height="tableHeight"  no-data-text="没有查询到相关数据!" @on-selection-change = 'getSelectRows' :loading='pageStatus.loading'
               border :columns="columns1"  :data="dataTable" >
        </Table>
        <Row style="margin-right:10px;">
            <Col span="24" >
                <Page style="float: right" :total="pagedata.total" :page-size="pagedata.pageSize" @on-change="pageChange" @on-page-size-change="pageSizeChange" :page-size-opts="pageSizeArray" show-total show-sizer show-elevator />
            </Col>
        </Row>
        <Modal  title="重污染天气预警响应" :transfer=false :mask-closable="false" v-model="dialogShow" v-if="dataToView && dialogShow"  :width=800 :styles="{height:'700px'}"  class-name='limit-height-dialog'>
            <Row>
                <Col span="24">
                    <Form ref="dialogForm" :class="mode === 'view'?'modal-view-detail':'rpt-form'" :show-message="false" :model="dataToView" :rules="mode === 'view'?{}:ruleCustom" :label-width="mode === 'view'?170:null" :label-position="mode === 'view'?'right':'top'">
                        <Row type="flex" justify="space-around" class="code-row-bg">
                            <Col span="11">
                                <FormItem label='企业名称：' prop='companyId'>
                                    <div v-if="mode === 'view'">{{dataToView.companyName}}</div>
                                    <cascader-dom v-else ref='orgCascader' @setOrgInfo='setCompanyId' @setOrgname="setCompanyName" :orgTree="true" :currentOrgId = "dataToView.companyId" :setCurrentName="{label:dataToView.companyName,value:dataToView.companyId}" ></cascader-dom>
                                </FormItem>
                            </Col>
                            <Col span="11">
                                <FormItem label='二级集团：' prop='belongOrgId'>
                                    <div v-if="mode === 'view'">{{dataToView.belongOrgName}}</div>
                                    <Input v-else class='' type='text' v-model='dataToView.belongOrgName' readonly></Input>
                                </FormItem>
                            </Col>
                        </Row>
                        <Row type="flex" justify="space-around" class="code-row-bg">
                            <Col span="11">
                                <FormItem label='预警级别：' prop='warningLevel'>
                                    <div v-if="mode === 'view'">{{this.dictMap.wlMap[dataToView.warningLevel] && this.dictMap.wlMap[dataToView.warningLevel].codingName}}</div>
                                    <Select v-else class='' placeholder="请选择预警级别" type='text' v-model='dataToView.warningLevel' >
                                        <Option v-for="item in dictMap.wlMap" :value="item.codingCodeId" :key="item.codingCodeId">{{ item.codingName }}</Option>
                                    </Select>
                                </FormItem>
                            </Col>
                            <Col span="11">
                                <FormItem label='管控类型：' prop='controlType'>
                                    <div v-if="mode === 'view'">{{this.dictMap.controlTypes[dataToView.controlType] && this.dictMap.controlTypes[dataToView.controlType].codingName}}</div>
                                    <Select v-else class='' placeholder="请选择管控类型" type='text' v-model='dataToView.controlType' clearable
                                            @on-change="(val)=>{if(!val){dataToView.addYield=null,dataToView.addValue=null};}" >
                                        <Option v-for="item in dictMap.controlTypes" :value="item.codingCodeId" :key="item.codingCodeId">{{ item.codingName }}</Option>
                                    </Select>
                                </FormItem>
                            </Col>
                        </Row>
                        <Row type="flex" justify="space-around" class="code-row-bg" v-if="dataToView.controlType">
                            <Col span="11">
                                <FormItem label='增加产量（吨）：' prop='addYield'>
                                    <div v-if="mode === 'view'">{{ dataToView.addYield }}</div>
                                    <InputNumber v-else class='w' placeholder="请填写增加产量（吨）" :min="0" type='text'
                                                 v-model='dataToView.addYield'></InputNumber>
                                </FormItem>
                            </Col>
                            <Col span="11">
                                <FormItem label='增加产值（万元）：' prop='addValue'>
                                    <div v-if="mode === 'view'">{{ dataToView.addValue }}</div>
                                    <InputNumber v-else class='w' placeholder="请填写增加产值（万元）" :min="0" type='text'
                                                 v-model='dataToView.addValue'></InputNumber>
                                </FormItem>
                            </Col>
                        </Row>
                        <Row type="flex" justify="space-around" class="code-row-bg">
                            <!--<Col span="23">-->
                              <!--<FormItem label="预警期间：" prop="warningPeriodFrom" >-->
                                <!--<div v-if="mode === 'view'">{{dataToView.warningPeriod}}</div>-->
                                <!--<DatePicker v-else class="query-form-el" v-model="dataToView.warningPeriodArr" format="yyyy-MM-dd" type="daterange" placement="bottom-end" placeholder="请选择预警期间"-->
                                            <!--@on-change="onSelectWarningPeriod"></DatePicker>-->
                              <!--</FormItem>-->
                            <!--</Col>-->
                            <Col span="11">
                                <FormItem label='预警开始时间：' prop='warningPeriodFrom'>
                                    <div v-if="mode === 'view'">{{ renderViewDateHourTime(dataToView.warningPeriodFrom)}}</div>
                                    <DatePicker v-else class="w" placeholder="请选择预警开始时间" v-model='dataToView.warningPeriodFrom' :clearable="false"
                                               type="datetime" format="yyyy年MM月dd日HH时mm分" :options="{disabledDate(date) {return date && dataToView.warningPeriodTo && date.valueOf() > dataToView.warningPeriodTo;}}"></DatePicker>
                                </FormItem>
                            </Col>
                            <Col span="11">
                                <FormItem label='预警结束时间：'>
                                    <div v-if="mode === 'view'">{{ renderViewDateHourTime(dataToView.warningPeriodTo) }}</div>
                                    <DatePicker v-else class="w" placeholder="请选择预警结束时间" v-model='dataToView.warningPeriodTo' :clearable="false"
                                                type="datetime" format="yyyy年MM月dd日HH时mm分" :options="{disabledDate(date) {return date && dataToView.warningPeriodFrom && date.valueOf() < dataToView.warningPeriodFrom;}}"></DatePicker>
                                </FormItem>
                            </Col>
                        </Row>
                        <Row type="flex" justify="space-around" class="code-row-bg">
                            <Col span="23">
                                <FormItem label='预警发布单位：' prop='warningUnit'>
                                    <div v-if="mode === 'view'">{{dataToView.warningUnit}}</div>
                                    <Input v-else class='query-form-el' type='text' v-model='dataToView.warningUnit'></Input>
                                </FormItem>
                            </Col>
                        </Row>
                        <Row type="flex" justify="space-around" class="code-row-bg">
                            <Col span="23">
                                <FormItem label='响应措施：' prop='responseMeasures'>
                                    <div v-if="mode === 'view'">{{dataToView.responseMeasures}}</div>
                                    <Input v-else class='query-form-el' type='text' v-model='dataToView.responseMeasures'></Input>
                                </FormItem>
                            </Col>
                        </Row>
                        <Row type="flex" justify="space-around" class="code-row-bg">
                            <Col span="23">
                                <FormItem v-if="mode === 'view'" label="响应措施相关附件(政府预警的通知或文件)：">
                                    <div v-show="dataToView.fileIdFiles.length>0" v-for="item in dataToView.fileIdFiles">
                                        <a @click="downloadFile(item)"><span style="color: #3399ff;margin-left: 5px">{{ item.fileName }}</span></a>
                                    </div>
                                </FormItem>
                                <FormItem v-else label="响应措施相关附件(政府预警的通知或文件)：" prop='fileIdFiles'>
                                    <div >
                                        <Upload ref="upload"
                                                :before-upload="(file) => { beforeUpload(file, 'fileId') }"
                                                :show-upload-list="true"
                                                :max-size="10240"
                                                multiple
                                                type="drag"
                                                :action="fileUrl">
                                            <div style="padding: 20px">
                                                <Icon type="ios-cloud-upload" size="52" style="color: #3399ff"></Icon>
                                                <p>点击将文件拖拽到这里上传</p>
                                            </div>
                                        </Upload>
                                    </div>
                                    <div v-show="dataToView.fileIdFiles.length>0" v-for="item in dataToView.fileIdFiles">
                                        <a @click.prevent="downloadFile(item)">{{item.fileName}}</a>
                                        <Button type="text" icon="md-trash" @click="removeFile(item.id, 'fileId')"
                                                  style="margin-left: 20px;margin-bottom: 3px"/>
                                    </div>
                                </FormItem>
                            </Col>
                        </Row>
                        <Row type="flex" justify="space-around" class="code-row-bg">
                            <Col span="11">
                              <FormItem label='填表人：' prop='registrant'>
                                <div v-if="mode === 'view'">{{dataToView.createUserName}}</div>
                                <Input v-else type='text' v-model='dataToView.createUserName' readonly></Input>
                              </FormItem>
                            </Col>
                            <Col span="11">
                                <FormItem label='填表时间：' prop='registTime'>
                                    <div v-if="mode === 'view'">{{renderViewDate(dataToView.createDate)}}</div>
                                    <DatePicker v-else type="date" placeholder="请选择日期" class="w" v-model='dataToView.createDate' readonly></DatePicker>
                                </FormItem>
                            </Col>
                        </Row>
						<Row type="flex" justify="space-around" class="code-row-bg">
							<Col span="11">
							<FormItem label='填表人电话：' prop='createMobile'>
								<div v-if="mode === 'view'">{{dataToView.createMobile}}</div>
								<Input v-if="mode === 'add'" type='text' v-model='dataToView.createMobile'></Input>
								<Input v-if="mode === 'edit'" type='text' v-model='dataToView.createMobile' :readonly="this.currentUser.userId === dataToView.createUserId ? false : 'readonly'"></Input>
							</FormItem>
							</Col>
							<Col span="11">
							</Col>
						</Row>
                    </Form>
                </Col>
            </Row>
            <div slot="footer">
                <Button v-if="mode != 'view'" type="primary"  class='ivu-btn-save' @click="submit('dialogForm')" >确定</Button>
                <Button v-if="mode != 'view'" type="primary"  class='ivu-btn-cancel' @click="handleCancel" >取消</Button>
                <Button v-if="mode === 'view'" class='ivu-btn-save' @click="dialogShow=false">关闭</Button>
            </div>
        </Modal>
    </Layout>
</template>

<script>
  import {Api} from '@/api/index.js'
  import {formatDate} from '@/tools/index'
  var cascaderDom = () => import('@/components/cascader-dom.vue');
  import pageCommonFunction from '@/components/pageCommonFunction.js'
  import { sessionStorage } from '@/common/cacheUtils.js'
  export default {
    components:{
      cascaderDom
    },
    data() {
      return {
        ...this.createCommonDataField(),
        columns1: [
          { title: '序号', width: 80, fixed: 'left', align: 'center', render: this.indexColumnsRenderSum},
          { key:'companyName',title: '企业名称', fixed: 'left', align: 'center', width: 200 },
          { key:'warningLevel',title: '预警级别',  align: 'center', width: 100,render:(h, params)=>{
            return h('span', this.dictMap.wlMap && this.dictMap.wlMap[params.row.warningLevel] && this.dictMap.wlMap[params.row.warningLevel].codingName)
          }},
            { key:'controlType',title: '管控类型',  align: 'center', width: 100,render:(h, params)=>{
                    return h('span', this.dictMap.controlTypes && this.dictMap.controlTypes[params.row.controlType] && this.dictMap.controlTypes[params.row.controlType].codingName)
                }},
            { key:'addYield',title: '增加产量（吨）',  align: 'center',minWidth:120},
            { key:'addValue',title: '增加产值（万元）',  align: 'center',minWidth:120},
          { key:'warningPeriodFrom',title: '预警开始时间',  align: 'center', width: 135,render:this.renderCellDateHourTime},
            { key:'warningPeriodTo',title: '预警结束时间',  align: 'center', width: 135,render:this.renderCellDateHourTime},
            { key:'warningUnit',title: '预警发布单位',  align: 'center', tooltip:true,minWidth:140},
          { key:'responseMeasures',title: '响应措施',  align: 'center', tooltip:true,minWidth:150},
            { key:'belongOrgName',title: '二级集团', align: 'center', width: 150 },
          this.getActionColumns((params) => {return params.row.id === '-1';})
        ],
        ruleCustom : {
          companyId: [ { required: true, message: '请填写企业名称', trigger: 'change' } ],
          warningLevel: [ { required: true, message: '请填写预警级别', trigger: 'change' } ],
          warningPeriodFrom: [ { required: true, message: '请填写预警开始时间', trigger: 'change',type:'date' } ],
		  createMobile: [{ pattern: /^((0\d{2,3}-\d{7,8})|(1[3675849]\d{9}))$/, required: true, message: '请填写填报人电话', trigger: 'change' }],
            fileIdFiles:[{
                validator: (rule, value, callback) => {
                    if (this.dataToView.fileIdFiles.length<1) {
                        callback('响应措施相关附件必须上传')
                    } else {
                        callback()
                    }
                },
                required: true,
                trigger: 'change'
            }]
        },
        warningPeriodArr:[],
        tableHeight:10,
          dictMap: {},
        downloadUrl: Api.downloadPTWSchemeFile,
        // api
        queryUrl:Api.queryHePoWeatherWarningResponse,
        exportUrl:Api.exportHePoWeatherWarningResponse,
        deleteUrl:Api.deleteHePoWeatherWarningResponse,
        bthDeleteUrl:Api.batchDeleteHePoWeatherWarningResponse,
        getUrl:Api.getHePoWeatherWarningResponse,
        updateUrl:Api.updateHePoWeatherWarningResponse,
        saveUrl:Api.saveHePoWeatherWarningResponse,
      }
    },
    async mounted() {
        this.warningPeriodArr=[]
        await this.$http.get(Api.queryDictBycode + "WL-000002,WL-000003", {}).then((res) => {
            this.dictMap = {
                wlMap: this.dictListToMap(res.data.data['WL-000002']),
                controlTypes: this.dictListToMap(res.data.data['WL-000003'])
            }
        })
        this.setTableHeight();
        this.query();
    },
    methods:{
      ...pageCommonFunction,
      createEmptyDataToAdd() {
          return {
              fileId:this.get_uuid(),
              fileIdFiles:[],
              addYield:null,
              addValue:null,
			  createMobile: sessionStorage('userId').getObject('userId').mobileNumber,
          }
      },

      deleteData(params) {
        this.deleteDateAjax(params);
      },
      query() {
          if (this.warningPeriodArr.length != 0){
              this.dataToQuery.startDate = this.renderViewDate(this.warningPeriodArr[0])
              this.dataToQuery.endDate = this.renderViewDate(this.warningPeriodArr[1])
          }
        this.queryAjax();
      },
      submit(name) {
        this.submitAjaxValidateField(name);
      },
      switchQuery(flag) {
          this.switchFlag = flag;
          if (!this.switchFlag) {
            this.tableHeight = this.tableHeight + 88;
          } else {
            this.tableHeight = this.tableHeight - 88;
          }
      },
        rester(){
          this.dataToQuery = {};
            this.warningPeriodArr = [];
          this.queryAjax();
        },
      onSelectWarningPeriod(data) {
         if(data[0] === "" || data[1] === "") {
             this.dataToView.warningPeriodFrom = null;
             this.dataToView.warningPeriodTo = null;
         } else {
             this.$set(this.dataToView,'warningPeriodFrom',data[0]);
             this.$set(this.dataToView,'warningPeriodTo',data[1]);
         }
      },
      async afterDataToViewInit() {
          await this.getFiles('fileId');
      }
    },
    watch:{
    },

  }
</script>

<style lang='css' scoped>
    .rpt-form{}
    /deep/ .rpt-form .query-form-el{width:100%;}
</style>
